<template>
  <view>
    <view class="wrap" :style="Height">
      <view class="u-tabs-box">
        <u-tabs-swiper id="target" active-color="#fed500" inactive-color="#000000" ref="tabs" :list="lists" :current="current"
          @change="change" bar-width="60" gutter="80"></u-tabs-swiper>
      </view>
      <swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom" :refresher-enabled="true" :refresher-triggered="triggered"  @refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore">
            <view class="page-box">
              <navigator class="sign-item" v-for="(item,index) in all" :key="index" :url="'/pages/Events/OrderGoods/OrderGoods?Name='+item.name">
                <view class="sign-item_l">
                  <view class="sign-item_img">
                    <image src="../../../static/image/main.png" mode="aspectFill" class="img"></image>
                  </view>
                </view>
                <view class="sign-item-r">
                  <view style="width: 100%;">
                    <view class="u-line-3">
                      {{item.name}}
                    </view>
                  </view>
                  <view class="sign-item-b">
                    <view class="sign-item-r_l">{{item.state}}</view>
                    <view class="sign-item-r_r">12月30日至12月31日</view>
                  </view>
                </view>
              </navigator>
              <view style="height: 50rpx;"></view>
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom" :refresher-enabled="true" :refresher-triggered="triggered"  @refresherpulling="onPulling" @refresherrefresh="onRefresh1" @refresherrestore="onRestore">
            <view class="page-box">
              <navigator class="sign-item" v-for="(item,index) in registered" :key="index" :url="'/pages/Events/OrderGoods/OrderGoods?Name='+item.name">
                <view class="sign-item_l">
                  <view class="sign-item_img">
                    <image src="../../../static/image/main.png" mode="aspectFill" class="img"></image>
                  </view>
                </view>
                <view class="sign-item-r">
                  <view style="width: 100%;">
                    <view class="u-line-3">
                      2023健身跨年配队/篝火晚会(汕头)暨金维斯健身俱乐部会员年会
                    </view>
                  </view>
                  <view class="sign-item-b">
                    <view class="sign-item-r_l">{{item.state}}</view>
                    <view class="sign-item-r_r">12月30日至12月31日</view>
                  </view>
                </view>
              </navigator>
              <view style="height: 50rpx;"></view>
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom" :refresher-enabled="true" :refresher-triggered="triggered"  @refresherpulling="onPulling" @refresherrefresh="onRefresh1" @refresherrestore="onRestore">
            <view class="page-box">
              <navigator class="sign-item" v-for="(item,index) in end" :key="index" :url="'/pages/Events/OrderGoods/OrderGoods?Name='+item.name">
                <view class="sign-item_l">
                  <view class="sign-item_img">
                    <image src="../../../static/image/main.png" mode="aspectFill" class="img"></image>
                  </view>
                </view>
                <view class="sign-item-r">
                  <view style="width: 100%;">
                    <view class="u-line-3">
                      2023健身跨年配队/篝火晚会(汕头)暨金维斯健身俱乐部会员年会
                    </view>
                  </view>
                  <view class="sign-item-b">
                    <view class="sign-item-r_l">{{item.state}}</view>
                    <view class="sign-item-r_r">12月30日至12月31日</view>
                  </view>
                </view>
              </navigator>
              <view style="height: 50rpx;"></view>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
  var vm;
  export default {
    data() {
      return {
        lists: [{
            name: '全部'
          },
          {
            name: '已报名'
          },
          {
            name:'已结束'
          }
        ],
        all:[{
          name:'2023健身跨年配队/篝火晚会(汕头)暨金维斯健身俱乐部会员年会',
          state:'正在报名'
        },{
          name:'创意艺术展',
          state:'已结束'
        }],
        registered:[{
          name:'2023健身跨年配队/篝火晚会(汕头)暨金维斯健身俱乐部会员年会',
          state:'正在报名'
        }],
        end:[{
          name:'2023健身跨年配队/篝火晚会(汕头)暨金维斯健身俱乐部会员年会',
          state:'已结束'
        }],
        current: 0,
        swiperCurrent: 0,
        tabsHeight: 0,
        dx: 0,
        triggered:true,
        activeColor: '#fed500',
        Height:0,
      };
    },
    onLoad() {
      vm = this;
    },
    mounted() {
      // #ifdef H5 || APP-PLUS
      uni.createSelectorQuery().in(this).select("#target").boundingClientRect(data => {
        this.Height = 'height: calc(100vh - '+(data.height)+'px);'
      }).exec() 
      // #endif
    
    },
    methods: {
      reachBottom() {
        
      },
      // tab栏切换
      change(index) {
        this.swiperCurrent = index;
      },
      transition({
        detail: {dx}
      }) 
      {
        this.$refs.tabs.setDx(dx);
      },
      animationfinish({
        detail: {
          current
        }
      }) 
      {
        this.$refs.tabs.setFinishCurrent(current);
        this.swiperCurrent = current;
        this.current = current;
      },

      /**
       * 自定义下拉刷新控件被下拉
       */
      onPulling(){
        this.triggered = true
      },
      
      /**
       * 自定义下拉刷新被触发
       */
      onRefresh(){
        setTimeout(()=>{
          this.onRestore()
        },1000)
      },
      onRefresh1(){
        setTimeout(()=>{
          this.onRestore()
        },1000)
      },
      
      /**
       * 自定义下拉刷新被中止
       */
      onRestore(){
        this.triggered = false
      }
    }
  };
</script>



<style lang="scss" scoped>
  .wrap {
    display: flex;
    flex-direction: column;
    /* #ifdef MP-WEIXIN */
    height: calc(100vh - var(--window-top));
    /* #endif */
    width: 100%;
  }
  .swiper-box {
    flex: 1;
  }
  .swiper-item {
    height: 100%;
  }
  .img{
    width: 100%;
    height: 100%;
  }
  .sign-item{
    display: flex;
    margin-top: 24rpx;
    padding:32rpx;
    background-color: #fff;
    .sign-item_img{
      width: 300rpx;
      height: 200rpx;
      .img{
        border-radius: 28rpx;
      }
    }
    .sign-item-r{
      padding: 0 24rpx;
      display: flex;
      flex-wrap: wrap;
      .sign-item-b{
        display: flex;
        justify-content: end;
        flex-direction: column;
      }
      .sign-item-r_l{
        font-size: 24rpx;
        color: $supernut-color;
      }
      .sign-item-r_r{
        font-size: 24rpx;
        margin-top: 8rpx;
      }
    }
  }
  
</style>
